Pseudo-elements like ::before and ::after can be used to insert icons or decorative symbols without adding extra HTML elements. This is especially useful when using icon fonts or Unicode characters.

Key Points

1
Use content in combination with Unicode characters or icon fonts to display icons.
2
Pseudo-elements do not exist in the DOM, so they are purely visual and keep HTML clean.
3
You can style these icons with CSS properties like color, font-size, margin, and position.
4
Perfect for adding decorative symbols, social media icons, or arrows without extra markup.

Example: Adding a Star Icon Using ::before

In this example, the ::before pseudo-element inserts a gold star before the paragraph text. No additional HTML elements are needed to display the icon.

Example: Using Icon Font with ::after

Here, the ::after pseudo-element adds a Font Awesome user icon to the button without modifying the HTML. You can control its position, size, and color entirely with CSS.

Best Practices

1
Use pseudo-elements for decorative or non-interactive icons to reduce HTML clutter.
2
Ensure accessibility by not relying solely on pseudo-elements for conveying critical information.
3
Combine with position, margin, and font-size to place icons precisely.
4
Test across browsers to ensure correct rendering of icon fonts or Unicode symbols.

Difficulty: 6/10

Topics: pseudo-elements, icon rendering, accessibility

Scenario Questions

0-2 years experience

1
How would you add a star icon after a rating number using only CSS, without adding any extra HTML elements?
2
What happens if you forget to set content: '' on a pseudo-element when trying to display an icon?

2-5 years experience

1
A team member added icons using pseudo-elements, but now screen readers are announcing the unicode characters — how would you debug and fix this?
2
We’re using icon fonts via pseudo-elements, but the icons disappear on mobile Safari — what could be causing this and how would you investigate?

5-8 years experience

1
You're designing a reusable button component that supports icons via pseudo-elements — how do you handle dynamic icon content, accessibility, and performance across 50+ variants?
2
In a large design system, pseudo-elements are used for icons everywhere — what are the scalability risks, and how would you mitigate them without forcing a full rewrite?

8+ years experience

1
Our legacy UI uses pseudo-elements for icons across 200+ components, but we’re migrating to a new design system with SVG sprites — how would you plan and execute this transition without breaking accessibility or causing layout shifts?
2
You’re advising a company that uses pseudo-element icons for performance reasons, but now they’re getting complaints about inconsistent rendering across browsers — how do you balance performance, maintainability, and cross-platform reliability at the architecture level?

Follow-up Questions

❓What happens if the icon font fails to load?
❓How would you test this in a screen reader?
❓Why not just use an <img> tag instead?